<template>
  <el-drawer
    class="drawer-wrapper"
    v-model="drawer"
    :title="props.title"
    :size="props.width"
    :modal="props.modal"
    @close="closeDrawer"
  >
    <template #default>
      <slot name="drawer-content"></slot>
    </template>
    <template #footer>
      <slot name="drawer-footer"></slot>
    </template>
  </el-drawer>
</template>
<script lang="ts" setup name="DrawerComponent">
import { ref, withDefaults, watch } from 'vue'
import './drawer.less'

interface Props {
  visible: boolean
  title: string //模态框标题名称
  width: string | number //模态框弹窗宽度
  modal: boolean //是否需要模态框(遮罩层)
}

interface Emits {
  (event: 'close', isShow: boolean): void
}

const props = withDefaults(defineProps<Props>(), {
  visible: false,
  title: '默认标题',
  width: '50%',
  modal: true
})

const drawer = ref<boolean>(props.visible)
// watch监听
watch(
  () => props.visible,
  val => {
    drawer.value = val
  }
)

const emits = defineEmits<Emits>() //将定义Emits数据类型赋值
// 关闭事件回调函数
const closeDrawer = () => {
  emits('close', false) //emit方法供父级组件调用
}
</script>
<style scoped></style>
